<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input-icon-demo</title>
    <link rel="stylesheet" href="font_asl3zj4bmdv/iconfont.css">
    <script src="font_asl3zj4bmdv/iconfont.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background: antiquewhite;
    }

    .custom-icon-input {
        height: 100%;
        display: inline-block;
        text-align: center;
        margin: auto;
        background: #eddbed;
        border-radius: 12px;
        padding: 3px;
        border: 1px solid #f00fff;
    }

    input {
        outline: none;
        border-radius: 5px;
        border: 1px solid #f00fff;
        padding: 5px;
        font-size: 1.1rem;
        transition: all .3s ease;
    }

    .icon {
        outline: none;
        border: none;
        height: 100%;
        background: transparent;
        padding: 10px;
        text-align: center;
    }

    input:focus {
        border: 1px solid #aa31b2;
    }
</style>
<body>
<div class="custom-icon-input">
    <input type="text">
    <span class="icon iconfont">&#xe63e;</span>
</div>
</body>
</html>